<script setup>
import { ref, onMounted, watch } from 'vue';
import dayjs from 'dayjs';
import BarChart from '@/components/BarChart.vue';
import StackedBarChart from '@/components/StackedBarChart.vue';
import TrendBarChart from '@/components/TrendBarChart.vue';
import { buildChartOption, getChartData } from '@/HomeChart';

const startDate = ref(''); // 开始日期
const endDate = ref(''); // 结束日期
const isLoading = ref(true); // 防止重复点击的加载状态

const timestamp = ref(0);
// 直接替换 options.value = {} 不会影响 HomeChart; 但是修改 options.value.dataList = [] 会影响 HomeChart, 因为两者指向同一块内存
// const options = ref(HomeChart);
const options = ref(buildChartOption());

onMounted(async () => {
  // 设置默认日期为本月第一天和今天
  const today = dayjs();
  const firstDayOfMonth = today.startOf('month');

  startDate.value = firstDayOfMonth.format('YYYY-MM-DD');
  endDate.value = today.format('YYYY-MM-DD');

  console.log('relativeTime:', firstDayOfMonth.fromNow());
  console.log('locale:', today.format('dddd'));

  // options.value = await getChartData(startDate.value, endDate.value);
  // isLoading.value = false;
  // timestamp.value = Date.now();
});

// 日期变化处理函数
// watch([startDate, endDate], async () => {
watch(() => [startDate.value, endDate.value], async () => {
  if (startDate.value && endDate.value) {
    isLoading.value = true;
    try {
      console.log('监听的日期范围:', startDate.value, '至', endDate.value);
      options.value = await getChartData(startDate.value, endDate.value);
      timestamp.value = Date.now(); // 触发图表更新
    } finally {
      isLoading.value = false;
    }
  }
});
</script>

<template>
  <div class="chart-container">
    <div class="date-picker-container">
      <label for="start-date">开始日期:</label>
      <!-- <input :disabled="isLoading" id="start-date" type="datetime-local" v-model="startDate" /> -->
      <input :disabled="isLoading" id="start-date" type="date" v-model="startDate" />
      <label for="end-date">结束日期:</label>
      <!-- <input :disabled="isLoading" id="end-date" type="datetime-local" v-model="endDate" /> -->
      <input :disabled="isLoading" id="end-date" type="date" v-model="endDate" />
    </div>
    <div class="data-container">
      <h2>方格数据：options.dataList</h2>
      <div class="data-item" v-for="(item, index) in options.dataList" :key="index">
        {{ item }}
      </div>
    </div>
    <div class="charts-wrapper">
      <BarChart :option="options.barOption" :timestamp="timestamp" />
      <StackedBarChart :option="options.stackedBarOption" :timestamp="timestamp" />
      <TrendBarChart :option="options.trendBarOption" :timestamp="timestamp" />
    </div>
  </div>
</template>

<style scoped>
.chart-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  justify-content: flex-start;
}

.data-container {
  background-color: #f9f9f9;
  padding-bottom: 40px;
}

.data-item {
  display: inline;
  padding: 15px;
  margin: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-weight: 700;
}

.date-picker-container {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
  /* width: fit-content; */
  justify-content: flex-end;
}

.date-picker-container label {
  font-weight: bold;
}

.date-picker-container input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.charts-wrapper {
  display: flex;
  gap: 20px;
  width: 100%;
}

/* 确保图表容器占据相等的宽度 */
.charts-wrapper>div {
  flex: 1;
}
</style>
